<template>
    <div>
        <div class="searchs">
        <el-input v-model="input" placeholder="请输入类别" style="width: 30%"></el-input>
        <el-button icon="el-icon-search" circle type="primary" style="margin-left: 10px" @click="search" ></el-button>
        </div>
        <el-row>
        <el-col :span="4" v-for="(o, index) in this.pageData" :key="index" :offset="index > 0 ? 2 : 0">
            <el-card :body-style="{ padding: '0px',height:'28vh',width:'100%' }">
                <img :src="o.iconsrc" class="image">
                <div style="padding: 14px;">
                    <p>ID:{{o.projectid}}</p>
                    <span>问卷名:{{o.projectname}}</span>
                    <p>作者:{{o.projectownername}}</p>
                    <p>类别:{{o.projectclassname}}</p>
                    <div class="bottom clearfix">
                        <time class="time">{{new Date(o.projectdate).toLocaleTimeString()}}</time>
                        <el-button type="text" class="button" @click="detail(o.projectid)">进入问卷</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="(Math.floor(this.datas.length/4))*10+10"
            @current-change="nexts"
            :current-page="this.page"
            ref="pages"
    >
    </el-pagination>
    </div>
</template>

<script>
    import {GetAll,GetByClass} from "../../network/user";

    export default {
        name: "AllProject",
        data() {
            return {
                datas:[],
                pageData:[],
                input:'',
                page:1
            };
        },
        mounted() {
            GetAll().then(res => {
                this.datas = res;
                console.log(this.datas);
                this.nexts(1)
            })
        },
        methods:{
            nexts(val){
                // console.log(current)
                this.page = val;
                val = val*4;
                this.pageData = this.datas.slice(val-4,val)
            },
            search(){
                if(this.input.trim().length > 0){

                    GetByClass({"classname":this.input}).then(res => {
                        if(res.length > 0){
                            this.datas = res;
                            console.log(this.datas);
                            this.nexts(1);
                            this.page = 1
                        }else {
                            this.$message.error("没有该类别，请重新检索",1000)
                        }
                    })
                }else {
                    GetAll().then(res => {
                        this.datas = res;
                        console.log(this.datas);
                        this.nexts(1)
                    })
                }
            },
            detail(Id){
                this.$router.push("allproject/"+Id);
                this.$store.state.projectid = Id.toString()
            }
        }
    }
</script>

<style scoped>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        height: 100%;
        /*transform: scale(1.0,1.0);*/
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .searchs:before,
    .searchs:after {
        display: table;
        content: "";
    }

    .searchs:after {
        clear: both
    }
    .searchs{
        padding-bottom: 20px;
    }
</style>
